<template>
  <div style="background:white">
     <header>
         <h3>{{$route.params.title}}</h3>
     </header>
     <section>

         <div v-if="isLoading">
             <van-skeleton v-for="i in 5" :key="i" title :row="3" />
         </div>
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
               <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
         <ul v-if="!isLoading" class="song-list">
             <li v-for="item in list" :key="item.song_id">
                 <img :src="item.pic_s500" alt="">
                 <p>
                     {{item.title}}
                 </p>
             </li>
         </ul>
         </van-list>
         </van-pull-refresh>
     </section>
       <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </van-pull-refresh> -->
  </div>
</template>

<script>
import {getBillList} from "@/api/baidu-music";
export default {
     data(){
         return{
             list:[],
             isLoading:false,
             refreshing:false,
             loading:false,
             finished:false,
             offset:0
         }
     },
// created(){
//     getBillList(this.$route.params.type,6).then(res=>{
//         this.list=res.data.song_list;
//         this.isLoading=false
       
//         console.log(res.data.song_list);
//     })
// },
methods:{
    onRefresh(){
        this.isLoading=true
        this.list=[]
         getBillList(this.$route.params.type,6).then(res=>{
        this.list=res.data.song_list;
        this.isLoading=false
        this.refreshing=false
        console.log(res.data.song_list);
    })
}, 
onLoad(){
          getBillList(this.$route.params.type,6,this.offset).then(res=>{
        this.list=this.list.concat(res.data.song_list);
        this.loading=false   
        this.offset +=6
        console.log(res.data.song_list);
    })
}
  }
}
  

</script>

<style lang="less" scoped>
.song-list{
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    li{
        width: 50%;
        padding: 10px;
        box-sizing: border-box;
        img{
            width: 100%;
        }
    }
}

</style>